<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/mui.loading.css" />
		<style type="text/css">
			 * { touch-action: pan-y; }
			.mui-views,
			.mui-view,
			.mui-pages,
			.mui-page,
			.mui-page-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: #efeff4;
			}

			.mui-pages {
				top: 46px;
				height: auto;
			}

			.mui-scroll-wrapper,
			.mui-scroll {
				background-color: #efeff4;
			}

			.mui-page.mui-transitioning {
				-webkit-transition: -webkit-transform 300ms ease;
				transition: transform 300ms ease;
			}

			.mui-page-left {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}

			.mui-ios .mui-page-left {
				-webkit-transform: translate3d(-20%, 0, 0);
				transform: translate3d(-20%, 0, 0);
			}

			.mui-navbar {
				position: fixed;
				right: 0;
				left: 0;
				z-index: 10;
				height: 44px;
				background-color: #f7f7f8;
			}

			.mui-navbar .mui-bar {
				position: absolute;
				background: transparent;
				text-align: center;
			}

			.mui-android .mui-navbar-inner.mui-navbar-left {
				opacity: 0;
			}

			.mui-ios .mui-navbar-left .mui-left,
			.mui-ios .mui-navbar-left .mui-center,
			.mui-ios .mui-navbar-left .mui-right {
				opacity: 0;
			}

			.mui-navbar .mui-btn-nav {
				-webkit-transition: none;
				transition: none;
				-webkit-transition-duration: .0s;
				transition-duration: .0s;
			}

			.mui-navbar .mui-bar .mui-title {
				display: inline-block;
				width: auto;
			}

			.mui-page-shadow {
				position: absolute;
				right: 100%;
				top: 0;
				width: 16px;
				height: 100%;
				z-index: -1;
				content: '';
			}

			.mui-page-shadow {
				background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
				background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
			}

			.mui-navbar-inner.mui-transitioning,
			.mui-navbar-inner .mui-transitioning {
				-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
				transition: opacity 300ms ease, transform 300ms ease;
			}

			.mui-page {
				display: none;
			}

			.mui-pages .mui-page {
				display: block;
			}

			.mui-page .mui-table-view:first-child {
				margin-top: 15px;
			}

			.mui-page .mui-table-view:last-child {
				margin-bottom: 30px;
			}

			.mui-table-view {
				margin-top: 20px;
			}

			.mui-table-view span.mui-pull-right {
				color: #999;
			}

			.mui-table-view-divider {
				background-color: #efeff4;
				font-size: 14px;
			}

			.mui-table-view-divider:before,
			.mui-table-view-divider:after {
				height: 0;
			}

			.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}

			.mui-ios .mui-navbar .mui-bar .mui-title {
				position: static;
			}
		</style>
	</head>

	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		
		<!--单页面开始-->
		<div id="main-page" class="mui-page">
			<!--页面标题栏开始-->
			<header class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">关于MUI</h1>
			</header>
			<!--页面标题栏结束-->
			
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						<a class="jump-page" page-url="page1.html" class="mui-navigate-right">Page1 <i class="mui-pull-right update">V3.1.0</i></a>
					</li>
					<li class="mui-table-view-cell">
						<a class="jump-page" page-url="page2.html" class="mui-navigate-right">Page2 <i class="mui-pull-right update">V3.1.0</i></a>
					</li>
				</ul>
			</div>
			<!--页面主内容区结束-->
		</div>
		<!--单页面结束-->

		<script src="js/mui.js"></script>
		<script type="text/javascript" src="js/mui.loading.js"></script>
		<script src="js/mui.view.js"></script>

		<script type="text/javascript">
			mui.init();

			var viewApi = mui('.mui-view').view({
				defaultPage: '#main-page' //默认页面的选择器  
			});
			
			var view = viewApi.view;
			//处理view的后退与webview后退
			var oldBack = mui.back;
			mui.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			
			window.addEventListener("popstate", function() {
				/* var pageUrl = location.href.split("#")[1];
				if (!pageUrl) {
				    // pjax(defaultUrl);
				} else {
					pjax(pageUrl);
				} */
				mui.back();
			});
			
			mui('#main-page').on('tap', '.jump-page', function(e) {
				var pageUrl = this.getAttribute("page-url");
				pjax(pageUrl);
			});
			
			function pjax(url) {
				mui.showLoading('加载中...');
				mui.ajax(url, {
					dataType: 'html', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						var pageNum = mui(".mui-view .mui-page").length;
						var pageId = "sub-page-" + (pageNum + 1);
						if(document.getElementById(pageId)){
							document.getElementById(pageId).innerHTML = data;
						}else{
							var pageContainer = document.createElement("div");
							pageContainer.setAttribute("id", pageId);
							pageContainer.setAttribute("class", "mui-page");
							pageContainer.innerHTML = data;
							document.body.appendChild(pageContainer);
							
							mui("#" + pageId).on('tap', '.jump-page', function(e) {
								var pageUrl = this.getAttribute("page-url");
								pjax(pageUrl);
							});
						}
						
						// var title = mui("#page-container .mui-bar .mui-title")[0].innerText;
						viewApi.go("#" + pageId);
						var baseurl = location.href.split("#")[0];
						history.pushState(null, "", baseurl + "#" + url);
						mui.hideLoading();
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						console.log(type);
					}
				});
			}
			
		</script>
	</body>

</html>
